<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>聊天室</title>
		<!-- 重置样式 -->
		<link rel="stylesheet" href="../css/reset.css">
		<!-- icon -->
		<link rel="stylesheet" href="../css/fonts.css">
		<link rel="stylesheet" href="../js/jquery-weui/weui.min.css">
		<link rel="stylesheet" href="../js/jquery-weui/jquery-weui.css">
		<link rel="stylesheet" href="../css/main.css">
	</head>
	<body>
		<div class="group-message-model">
			<div class="top-wrapper">
				<i class="iconfont icon-back"></i>
				<span>编辑群发内容</span>
			</div>
			<div class="content">
				<div class="weui-cells__title">群发内容</div>
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea id="group-message-text" class="weui-textarea" placeholder="请输入文本" rows="5" maxlength="300"></textarea>
							<div class="weui-textarea-counter"><span id="writedNum">0</span>/300</div>
						</div>
					</div>
				</div>

				<div class="weui-cells__title">群发图片</div>
				<div class="weui-cells weui-cells_form upload-image-wrapper">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<div class="weui-uploader">
								<div class="weui-uploader__hd">
									<p class="weui-uploader__title">图片上传</p>
								</div>
								<div class="weui-uploader__bd">
									<ul class="weui-uploader__files" id="uploaderFiles">
										<li class="weui-uploader__file" style="background-image:url(../img/avatar.png)">
											<i class="iconfont icon-cancelwhite"></i>
										</li>
									</ul>
									<div class="weui-uploader__input-box">
										<input id="uploaderInput" name="uploaderImage" class="weui-uploader__input" type="file" accept="image/*" multiple="">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<a href="javascript:;" class="weui-btn weui-btn_primary send-message-btn">确认发送</a>
			</div>
		</div>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/exif.js"></script>
		<script>
			$(".icon-back").click(function() {
				history.go(-1);
			});

			//将base64转换为文件
			function dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			}
			$('input[name="uploaderImage"]').bind('change', function(e) {
				let file = e.target.files[0];
				if (file.size == 0) {
					alert('照片上传失败，上传的照片无效');
					$(this).val() == '';
				} else {
					console.log('image   ' + $(this).val());
					//图片方向角 added by lzk
					let Orientation = null;
					let inputFileInfo = $(this).val();
					let that = this;
					//$("#loadingState").show();
					//获取照片方向角属性，用户旋转控制
					EXIF.getData(file, function() {
						EXIF.getAllTags(this);
						Orientation = EXIF.getTag(this, 'Orientation');
						var reader1 = new FileReader();
						var re = reader1.readAsDataURL(file);
						var image = new Image();
						//定义流对象事件
						reader1.onload = function(e) {
							image.src = this.result;
						}
						// 缩放图片需要的canvas
						var canvas = document.createElement('canvas');
						var context = canvas.getContext('2d');
						// 定义image 事件
						//base64地址图片加载完毕后
						var compressoption = {
							maxWidth: 400,
							maxHeight: 400,
							quality: 0.7
						}
						image.onload = function() {
							//// 图片原始尺寸
							var originWidth = this.width;
							var originHeight = this.height;
							// 最大尺寸限制
							var maxWidth = compressoption.maxWidth || 400,
								maxHeight = compressoption.maxHeight || 400;
							// 目标尺寸
							var targetWidth = originWidth,
								targetHeight = originHeight;
							// 图片尺寸超过400x400的限制
							if (originWidth > maxWidth || originHeight > maxHeight) {
								if (originWidth / originHeight > maxWidth / maxHeight) {
									// 更宽，按照宽度限定尺寸
									targetWidth = maxWidth;
									targetHeight = Math.round(maxWidth * (originHeight / originWidth));
								} else {
									targetHeight = maxHeight;
									targetWidth = Math.round(maxHeight * (originWidth / originHeight));
								}
							}
							// canvas对图片进行缩放
							canvas.width = targetWidth;
							canvas.height = targetHeight;
							// 清除画布
							context.clearRect(0, 0, targetWidth, targetHeight);
							// 图片压缩
							context.drawImage(image, 0, 0, targetWidth, targetHeight);
							//修复ios
							var dataURL = "";
							if (navigator.userAgent.match(/iphone/i)) {
								// console.log('iphone');
								//alert(expectWidth + ',' + expectHeight);
								//如果方向角不为1，都需要进行旋转 added by lzk
								if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
									// alert('旋转处理');
									switch (Orientation) {
										case 6: //需要顺时针（向左）90度旋转
											// alert('需要顺时针（向左）90度旋转');
											rotateImg(this, 'left', canvas);
											break;
										case 8: //需要逆时针（向右）90度旋转
											// alert('需要顺时针（向右）90度旋转');
											rotateImg(this, 'right', canvas);
											break;
										case 3: //需要180度旋转
											// alert('需要180度旋转');
											rotateImg(this, 'right', canvas); //转两次
											rotateImg(this, 'right', canvas);
											break;
									}
								}
								dataURL = canvas.toDataURL("image/jpeg", 0.7);
							} else if (navigator.userAgent.match(/Android/i)) { // 修复android
								dataURL = canvas.toDataURL(compressoption.mime || "image/jpeg", compressoption.quality || 0.7);
							} else {
								//alert(Orientation);
								if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
									//alert('旋转处理');
									switch (Orientation) {
										case 6: //需要顺时针（向左）90度旋转
											rotateImg(this, 'left', canvas);
											break;
										case 8: //需要逆时针（向右）90度旋转
											rotateImg(this, 'right', canvas);
											break;
										case 3: //需要180度旋转
											rotateImg(this, 'right', canvas); //转两次
											rotateImg(this, 'right', canvas);
											break;
									}
								}

								dataURL = canvas.toDataURL("image/jpeg", 0.7);
							}
							
							$("#uploaderFiles").append('<li class="weui-uploader__file" style="background-image:url('+ dataURL +')"><i class="iconfont icon-cancelwhite"></i></li>');
							// canvas压缩并上传
							var fileObject = dataURLtoFile(dataURL, file.name);
							// console.log(fileObject);
							var formdata = new FormData();
							formdata.append('fileType', 'img'); //文件格式
							formdata.append('fileType_file', fileObject);
							formdata.append('method', 'upload');
							console.log('fileType_file', fileObject);
							$('input[name="uploaderImage"]').val("");
							$(".icon-cancelwhite").click(function() {
								$(this).parent().remove();
							});
							// $("#loadingState").show();
// 							$.ajax({
// 								url: "/Handle/Dis.ashx",
// 								method: 'POST',
// 								processData: false,
// 								contentType: false,
// 								cache: false,
// 								data: formdata
// 							}).done((response) => {
// 								let data = JSON.parse(response);
// 
// 								if (data.Result == true) {
// 									let path = data.Data[0].Path;
// 									var formdata2 = new FormData();
// 									formdata2.append('fileType', 'LSN');
// 									formdata2.append('fileType_file', path);
// 									formdata2.append('method', 'Distinguish');
// 									$.ajax({
// 										url: "/Handle/Dis.ashx",
// 										method: 'POST',
// 										processData: false,
// 										contentType: false,
// 										cache: false,
// 										data: formdata2
// 									}).done((response) => {
// 										$("#loadingState").hide();
// 										let data2 = JSON.parse(response);
// 										if (data2.Result == true) {
// 											let LSN = data2.Data;
// 											$("#Key").val(LSN);
// 											$("#search-btn-id").trigger("click");
// 										} else {
// 											alert(data2.Data);
// 										}
// 
// 									}).fail((err) => {
// 										console.log(err);
// 									})
// 								} else {
// 									alert('上传图片无效!请重新上传');
// 								}
// 
// 
// 							}).fail((err) => {
// 								console.log(err);
// 							})

						}
					});
				}
			});
			
			// 点击删除 删除当前图片
			$(".icon-cancelwhite").click(function() {
				$(this).parent().remove();
			});
			
			$("#group-message-text").bind("input propertychange", function(event) {
				let textareaLength = $(this).val().length;
				$("#writedNum").text(textareaLength);
			});
		</script>
	</body>
</html>
